<template>
    <div class="box2">
        <h2>
           郭惠宇的About组件
        </h2>
        <router-link to="/about/tab1">Tab1</router-link>
        <router-link to="/about/tab2">Tab2</router-link>
        <hr>
         <Transition name="fade" class="dv">
               <router-view></router-view>
         </Transition>
     
    </div>
</template>
<script setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';

const router = useRoute();
watch(
    () => router.path, 
    (path) => {
            console.log('路由的路径是：', path);
        }
    
);

</script>
<style scoped>
.box2 {
    min-height: 300px;
    background-color: rgb(0, 255, 0, 0.2);
    padding: 20px;
}
.box2 a{
    text-decoration: none;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>